<template>
  <div class="app-container">
    <vxe-grid
      ref="xGrid"
      border
      resizable
      keep-source
      size="small"
      align="center"
      round
      highlight-hover-row
      :loading="loading"
      :pager-config="tablePage"
      :columns="tableColumn"
      :data="tableData"
      :form-config="tableForm"
      @page-change="page"
      @form-submit="search"
    />
  </div>
</template>
<script>
import api from '@/api/sys-user-login-log'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableForm: {
        data: {
          loginName: '',
          status: ''
        },
        items: [
          { field: 'loginName', title: '登录名:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { field: 'status', title: '状态', itemRender: { name: '$select', options: [], props: { placeholder: '请选择', clearable: true }}},
          { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' }}, { props: { type: 'reset', content: '重置' }}] }}

        ]
      },
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'loginName', title: '登录名' },
        { field: 'ipAddr', title: '登录IP' },
        { field: 'loginLocation', title: '登录地址' },
        { field: 'browser', title: '浏览器' },
        { field: 'os', title: '操作系统' },
        { field: 'statusValue', title: '状态' },
        { field: 'msg', title: '信息' },
        { field: 'createTime', title: '登录时间' }

      ]
    }
  },
  mounted() {
  },
  created() {
    this.listData()
    this.listLoginStatus()
  },
  methods: {
    listData() {
      this.loading = true
      this.tableForm.data.page = this.tablePage.currentPage
      this.tableForm.data.pageSize = this.tablePage.pageSize
      api.pageData(this.tableForm.data).then(res => {
        const data = res.data
        this.tableData = data.data
        this.tablePage.currentPage = parseInt(data.page)
        this.tablePage.pageSize = parseInt(data.pageSize)
        this.tablePage.total = parseInt(data.total)
        this.loading = false
      })
    },
    search() {
      this.tablePage.currentPage = 1
      this.listData()
    },
    page({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.listData()
    },
    listLoginStatus() {
      api.loginStatus().then(res => {
        let data = res.data
        if (data) {
          data = data.map(v => { return { label: v.value, value: v.code } })
        }
        this.tableForm.items[1].itemRender.options = data
      })
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
